<!-- 待支付 -->
<template>
  <view class="lightColour navTop">
    <van-nav-bar title="待支付" left-arrow fixed class="loginNav" @click-left="onClickLeft" />
    <div class="line"></div>
    <div class="orderInfo">
        <div class="title">
            <span>订单编号  584854351547</span>
            <span>待支付</span>
        </div>
              
        <div class="main">           
            <div>
                <div>用户名</div>
                <div>WAAS1545</div>
            </div>
            <div>
                <div>联系方式</div>
                <div>18421443541<van-icon name="phone" class="iconPhone"></div>
            </div>
            <div>
                <div>订单金额(CNY)</div>
                <div><em>1500.00</em></div>
            </div>
            <div>
                <div>数量</div>
                <div>1500</div>
            </div>
            <div>
                <div>单价</div>
                <div>1500.00</div>
            </div>
            <div>
                <div>下单时间</div>
                <div>2019-02-22  23:00:00</div>
            </div>
        </div>
    </div>
    <div class="btnBox">
        <button class="gray">待买家支付  11:59:59</button>
    </div>
  </view>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  components: {},
  computed: {},
  mounted(){},
  methods: {}
}

</script>
<style lang='less' scoped>
.btnBox{margin-top: 100upx;
    .gray{background: #A7A7A7;width: 690upx;color: #fff;}
}

.orderInfo{
    padding: 0 30upx;
    background: #fff;
    position: relative;
    .title{
        border-bottom: 1upx solid #EFEFEF;
        display: flex;
        justify-content: space-between;
        font-size: 26upx;
        line-height: 88upx;
        span:nth-child(1){
            color: #434343;
        }
        span:nth-child(2){
            color: #FF7433
        }
    }
    .main{
        padding: 20upx 0;
        >div{
            display: inline-block;
            font-size: 26upx;
            div{width: 290upx;float:left;position: relative;
                &:nth-child(1){
                    color: #7F7F7F;
                }
                &:nth-child(2){
                    color: #000;
                }
                em{color: #FF7433}

                .iconPhone{
                    position: absolute;
                    right: -80upx;
                    width: 38upx;
                    height: 38upx;
                    color: #fff;
                    text-align: center;
                    line-height: 38upx;
                    background: #12B7F5;
                    box-shadow:0px 10upx 20upx 0px rgba(18,183,245,0.3);
                }
            }
        }
    }
}
</style>